<!-- 基础表格 -->
<template>
  <div class="parent">
    <div class="title">
      监控项目
    </div>
    <!-- 搜索区域 -->
    <ArtSearchBar style="margin-top: 10px;" v-model:filter="searchFormState" :items="searchItems" :is-expand="false"
      :show-expand="true" @search="handleSearch" @reset="handleReset" />
    <ElCard class="art-table-card" shadow="never" style="margin-top: 20px">
      <!-- 表格 -->
      <ArtTable rowKey="id" :show-table-header="false" :loading="loading" :data="tableData" :columns="columns"
        :pagination="pagination" @pagination:size-change="handleSizeChange"
        @pagination:current-change="handleCurrentChange">

        <!-- 告警状态列 -->
        <template #alarmIng="{ row }">
          <div class="">
            <el-tag v-if="row.alarmIng == '1'" style="color:#ffffff" color="red">紧急告警</el-tag>
            <el-tag v-else-if="row.alarmIng == '2'" class="" type="danger">告警</el-tag>
            <el-tag v-else-if="row.alarmIng == '3'" class="" type="warning">预警</el-tag>
            <el-tag v-else class="" type="success">正常</el-tag>
          </div>
        </template>
        <!-- 在线状态列 -->
        <template #online="{ row }">
          <div class="">
            <el-tag v-if="row.online == '1'" type="success">在线</el-tag>
            <el-tag v-else class="info">离线</el-tag>
          </div>
        </template>
        <!-- 操作列 -->
        <template #operation="{ row }">
          <div class="operation-buttons">
            <ArtButtonTable type="view" :row="row" @click="detail(row)" />
          </div>
        </template>
      </ArtTable>
    </ElCard>
  </div>
</template>

<script setup lang="ts">
import { useTable } from '@/composables/useTable'
import { BmslzService } from '@/api/bmslzApi'
import type { SearchFormItem } from '@/types'
import { router } from '@/router'

defineOptions({ name: 'UserMixedUsageExample' })

// 表单搜索初始值
const defaultFilter = ref({
  projectName: '',
  projectNo: '',
  online: '',
})

// 搜索表单状态
const searchFormState = ref({ ...defaultFilter.value })

const searchItems: SearchFormItem[] = [
  {
    prop: 'projectName',
    label: '项目名称',
    type: 'input',
    config: {
      placeholder: '请输入项目名称'
    }
  },
  {
    prop: 'projectNo',
    label: '项目编号',
    type: 'input',
    config: {
      placeholder: '请输入项目编号'
    }
  },
  {
    prop: 'online',
    label: '状态',
    type: 'select',
    options: [
      { label: '全部', value: '' },
      { label: '在线', value: '1' },
      { label: '离线', value: '0' },
    ]
  }
]
const handleReset = () => {
  // 重置搜索表单状态
  searchFormState.value = { ...defaultFilter.value }
  resetSearch()
}
const handleSearch = () => {
  console.log('搜索参数:', searchFormState.value)
  const { ...searchParams } = searchFormState.value

  // 搜索参数赋值
  Object.assign(searchState, { ...searchParams })
  searchData()
}
const detail = (item: any) => {
  router.push({
    path: "/monitor-project/project-detail",
    query: {
      id: item.id
    }
  })
}

const {
  tableData,
  columns,
  isLoading: loading,
  paginationState: pagination,
  onPageSizeChange: handleSizeChange,
  onCurrentPageChange: handleCurrentChange,
  searchState, // 搜索参数
  searchData,
  resetSearch
} = useTable<any>({
  core: {
    apiFn: BmslzService.projectList,
    apiParams: {
      pageSize: 10,
      pageNo: 1,
    },
    paginationKey: {
      current: 'pageNo',
      size: 'pageSize'
    },
    columnsFactory: () => [
      {
        prop: 'projectNo',
        label: '项目编号'
      },
      {
        prop: 'projectName',
        label: '项目名称'
      },
      {
        prop: 'projectRate',
        label: '监控频率',
      },
      {
        prop: 'monitorModelNo',
        label: '监控模型',
      },
      {
        prop: 'alarmModelNo',
        label: '告警模型',
      },
      {
        prop: 'online',
        label: '状态',
        useSlot: true,
      },
      {
        prop: 'alarmIng',
        label: '是否告警',
        useSlot: true,
      },
      {
        prop: 'createTime',
        label: '创建时间'
      },
      {
        prop: 'heartTime',
        label: '心跳时间'
      },
      {
        prop: 'operation',
        label: '操作',
        width: 90,
        useSlot: true,
        fixed: 'right'
      }
    ]
  }
})
</script>

<style lang="scss" scoped>
.parent {
  padding: 0 0 0 20px;

  .title {
    color: #101010;
    font-size: 20px;
    font-weight: bold;
  }

  .title2 {
    color: #101010;
    font-size: 15px;
    font-weight: bold;
  }
}
</style>